import React, { Component } from 'react';

export default class lifeCycle extends Component {
    constructor(props) {
        super(props);
        this.state = {
            des: "组件内部的参数"
        }
    }

    componentWillMount() {
        console.group(`组件挂载前`)
        console.log(this.props);
        console.log(this.state);
        console.log(this.refs.title)
        console.groupEnd()
    }
    componentDidMount() {
        console.group(`组件挂载后`)
        console.log(this.props);
        console.log(this.state);
        console.log(this.refs.title)
        console.groupEnd()
    }

    componentWillReceiveProps(nextProps) {
        console.group(`组件接收参数更新前`)
        console.log(this.props);
        console.log(nextProps);
        console.log(this.state);
        console.log(this.refs.title)
        console.groupEnd()
    }
    shouldComponentUpdate(nextProps, nextState){
        console.group(`组件是否更新`)
        console.log(nextProps);
        console.log(nextState);
        console.log(this.props);
        console.log(this.state);
        console.log(this.refs.title)
        console.groupEnd()
        if (nextProps === nextState) {
            return false
        }
        return true
    }
    componentWillUpdata(nextProps, nextState){
        console.group(`组件更新前`)
        console.log(nextProps);
        console.log(nextState);
        console.log(this.props);
        console.log(this.state);
        console.log(this.refs.title)
        console.groupEnd()
    }
    componentDidUpdate(){
        console.group(`组件更新后`)
        console.log(this.props);
        console.log(this.state);
        console.log(this.refs.title)
        console.groupEnd()
    }
    componentWillUnmount(){
        console.group(`组件卸载前`)
        console.log(this.props);
        console.log(this.state);
        console.log(this.refs.title)
        console.groupEnd()
    }

    render() {
        return (
            <div>
                <p ref="title">这里是子组件</p>
                <p>
                    {
                        JSON.stringify(this.props)
                    }
                </p>
            </div>
        )
    }

}